<template>
  <div class="app-container">
    <!-- 策略列表 -->
    <div class="cqt-box-item">
        <h3>我的策略列表
            <el-button v-if="ShowAddDelte" type="primary"  size="mini"  @click="handleAddStrategy()" >添加 <i class="el-icon-upload el-icon--right"></i></el-button>
        </h3>
        <el-table
            :data="strategyList"
            border
            stripe
            style="width:100%">

            <el-table-column
                prop="id"
                label="策略ID"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                prop="name"
                label="策略名"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                prop="jarName"
                label="策略jar包名"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                prop="creator"
                label="创建者"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                prop="state"
                label="开启状态"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleView(scope.$index, scope.row)">查看</el-button>
                    <el-button v-if="ShowAddDelte"
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                    <el-button v-if="showSetStrategy"
                        size="mini"
                        @click="handleStrategySet(scope.$index, scope.row)">设置</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requestData.currentPage"
            :page-sizes="[50, 100, 150, 200]"
            :page-size="requestData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="logTotal">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { getStrategyList, deleteStrategy } from "@/api/strategy";

export default {
  data() {
    return {
      //当前用户的角色
      ShowAddDelte: true,

      showSetStrategy: false,

      strategyList: [],
      logTotal: 0,
      requestData: {
        currentPage: 1,
        pageSize: 50
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 初始化请求
      this.loadStrategyList();
      this.loadSet_Add_DeleteButtonRoles();
    },

    // TODO 通过用户角色判断添加按钮以及删除按钮是否展示
    loadSet_Add_DeleteButtonRoles() {
      var role = this.$store.state.user.roles[0];
      if (role == "editor") {
        this.ShowAddDelte = false;
      }
      if (role == "admin") {
        this.showSetStrategy = true;
      }
    },

    //加载所有的策略列表
    loadStrategyList() {
      getStrategyList(this.requestData).then(response => {
        var data = response.data;
        this.strategyList = data.list;
        this.logTotal = data.total;
      });
    },

    //跳转页面并且传参数Id到路由
    handleView(index, row) {
      console.log(index, row);
      this.$router.push({ path: "/strategy/info?id=" + row.id });
    },

    //跳转到策略的设置页面
    handleStrategySet(index, row) {
      console.log(index, row);
      this.$router.push({ path: "/strategy/set?id=" + row.id });
    },

    //跳转到新增策略yemian
    handleAddStrategy() {
      this.$router.push({ path: "/strategy/save" });
    },

    //删除某条策略信息
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //准备参数
          //先将该参数删除之后将所有配置信息重新提交
          this.strategyList.splice(index, 1);
          // TODO 发出删除请求
          var params = {
            id: row.id
          };
          deleteStrategy(params).then(response => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.requestData.pageSize = val;
      this.loadLogData();
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.requestData.currentPage = val;
      this.loadLogData();
    }
  }
};
</script>

<style scoped>
.cell .el-tag {
  margin-left: 2px;
  margin-right: 2px;
}
.el-table {
  margin-bottom: 20px;
}
.cqt-caption {
  font-size: 14px;
  color: #ccc;
  padding: 10px 20px;
  background-color: #f7f7f7;
  border-radius: 4px;
  margin: 0;
}
</style>
